<template>
  <div class="user-profile">
    <van-nav-bar
      class="nav-title"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <input
      ref="avatar_ipt"
      type="file"
      hidden
      accept="image/*"
      @change="onFileChange"
    >
    <van-cell
      title="头像"
      is-link
      @click="$refs.avatar_ipt.click()"
    >
      <van-image
        class="avatar"
        round
        fit="cover"
        :src="user.photo"
      />
    </van-cell>
    <van-popup
      :style="{ height: '100%' }"
      v-model="isAvatarShow"
      position="bottom"
    >
      <UpdateAvatar
        v-if="isAvatarShow"
        @close="isAvatarShow = false"
        :avatar="avatar"
        @updatePhoto="user.photo = $event"
      />
    </van-popup>
    <van-cell
      title="昵称"
      :value="user.name"
      is-link
      @click="isNickNameShow = true"
    />
    <van-popup
      v-model="isNickNameShow"
      position="bottom"
    >
      <NikeName
        v-if="isNickNameShow"
        :name.sync="user.name"
        @close="isNickNameShow = false"
      />
    </van-popup>
    <van-cell
      title="性别"
      :value="user.gender ? '女' : '男'"
      is-link
      @click="isGenderShow = true"
    />
    <van-popup
      v-model="isGenderShow"
      position="bottom"
    >
      <UpdateGender
        v-if="isGenderShow"
        v-model="user.gender"
        @close="isGenderShow = false"
      />
    </van-popup>
    <van-cell
      title="生日"
      :value="user.birthday"
      is-link
      @click="isBirthdayShow = true"
    />
    <van-popup
      v-model="isBirthdayShow"
      position="bottom"
    >
      <UpdateBirthday
        v-if="isBirthdayShow"
        v-model="user.birthday"
        @close="isBirthdayShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { getUserMessage } from '@/api/user'
import NikeName from './nike-name'
import UpdateGender from './gender'
import UpdateBirthday from './birthday'
import UpdateAvatar from './photo'
export default {
  name: 'UserProfile',
  components: {
    NikeName,
    UpdateGender,
    UpdateBirthday,
    UpdateAvatar
  },
  data () {
    return {
      user: {},
      isNickNameShow: false,
      isGenderShow: false,
      isBirthdayShow: false,
      isAvatarShow: false,
      avatar: null
    }
  },
  methods: {
    async getUser () {
      try {
        const { data } = await getUserMessage()
        // console.log(data)
        this.user = data.data
      } catch (err) {
        console.log(err)
      }
    },
    onFileChange (e) {
      const imgUrl = URL.createObjectURL(e.target.files[0])
      // console.log(imgUrl)
      this.avatar = imgUrl
      this.isAvatarShow = true
      e.target.value = ''
    }
  },
  created () {
    this.getUser()
  }
}
</script>

<style lang="less" scoped>
.user-profile {
  .van-cell {
    align-items: center;
  }
  .avatar {
    float: right;
    width: 60px;
    height: 60px;
  }

  .van-popup {
    background-color: #f5f7f9;
  }

  .photo-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}
</style>
